<template>
  <div class="cell" :class="'cell-'+status">
    <div class="info">
      <div class>
        <div class="price-box">
          <span>定金</span>
          <span class="price letter-price">{{params.frontMoney | yuan}}</span>
        </div>
        <div class="price-box">
          <span>总价</span>
          <span class="all-price letter-price">{{params.price | yuan}}</span>
        </div>
      </div>
      <div>
        <div class="stock-box" v-if="status == 'going'">仅剩 {{params.stock}} 件</div>
        <div class="stock-box" v-else-if="status == 'unstart'">限量 {{params.maxBuy}} 件</div>
      </div>
    </div>
    <div class="time-box" v-if="status == 'going'">
      <span class="text">距结束剩余</span>
      <CountDown :time="endTime" @callback="onCallback" done-text="00:00:00">
        <div class="time-end">
          <span>{%d}</span>
          <i>:</i>
          <span>{%h}</span>
          <i>:</i>
          <span>{%m}</span>
          <i>:</i>
          <span>{%s}</span>
        </div>
      </CountDown>
    </div>
    <div class="time-box" v-else-if="status == 'unstart'">
      <span class="text">距开始剩余</span>
      <div class="time-start">
        <CountDown :time="startTime" @callback="onCallback" done-text="00:00:00">
          <span>{%d}</span>
          <i>:</i>
          <span>{%h}</span>
          <i>:</i>
          <span>{%m}</span>
          <i>:</i>
          <span>{%s}</span>
        </CountDown>
      </div>
    </div>
  </div>
</template>
<script>
import CountDown from "@/components/CountDown";
export default {
  data() {
    return {};
  },
  props: {
    info: {
      type: Object
    },
    params: {
      type: Object
    },
    loadData: {
      type: Function
    }
  },
  computed: {
    /**
     * 预售状态
     * going ==> 进行中
     * unstart ==> 未开始
     * ended ==> 已结束
     */
    status() {
      return this.info.state == 1 ? "going" : "unstart";
    },
    // 结束时间
    endTime() {
      return this.info.end_time ? parseFloat(this.info.end_time) * 1000 : "";
    },
    // 开始时间
    startTime() {
      return this.info.start_time
        ? parseFloat(this.info.start_time) * 1000
        : "";
    }
  },
  methods: {
    onCallback() {
      this.loadData();
    }
  },
  components: {
    CountDown
  }
};
</script>
<style scoped>
.cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  color: #ffffff;
  background: #f5f5f5;
}

.cell-going {
  background: #fa215f;
}

.cell-unstart {
  background: #4b0;
}

.cell .info {
  display: flex;
  align-items: flex-end;
}

.price-box {
  line-height: 1.4;
}

.cell .info .price {
  font-weight: 800;
  font-size: 18px;
  margin-right: 10px;
}

.cell .info .market-price {
  font-weight: 400;
  font-size: 12px;
  text-decoration: line-through;
}

.cell .info .stock-box {
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid #fff;
}

.cell .time-box {
  text-align: center;
}

.cell .time-box .text {
  font-size: 12px;
}

.time-end {
  font-size: 12px;
  padding: 4px 0;
}

.time-end span {
  color: #fa215f;
  background: #ffffff;
  padding: 0px 4px;
  border-radius: 2px;
}

.time-end i,
.time-start i {
  font-style: normal;
}

.time-start {
  font-size: 12px;
  padding: 4px 0;
}

.time-start span {
  color: #4b0;
  background: #ffffff;
  padding: 0px 4px;
  border-radius: 2px;
}

.time-start-text {
  display: block;
  border-radius: 2px;
  padding: 2px 4px;
  background: #006633;
}
</style>
